<template>
  <div>
    <header id="header">
      <div class="hrader-top">
        <p class="van-ellipsis branch-name">省公司</p>
        <van-image
          class="image"
          round
          width="80px"
          height="80px"
          fit="cover"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="header-main">
        <router-link class="header-tab" to="/distributDetails">
          <p class="title">可结算分润</p>
          <p class="money">{{ cash }}</p>
        </router-link>
        <router-link class="header-tab" to="/shop">
          <p class="title">店铺总数</p>
          <p class="money">{{ shopNum }}</p>
        </router-link>
      </div>
    </header>
    <main class="scroller" :style="{ height: height + 'px' }">
      <transition name="van-slide-left">
        <router-view />
      </transition>
    </main>
  </div>
</template>

<script>
export default {
  name: "home",

  data() {
    return {
      cash: 999999,

      shopNum: 100,

      height: 0
    };
  },

  mounted() {
    this.initHeight();
  },

  methods: {
    initHeight() {
      const Rec = document.querySelector(".scroller").getBoundingClientRect();
      const bodyHeight = document.body.offsetHeight;

      this.height = bodyHeight - Rec.top;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/mixin.scss";

#header {
  background-color: #fff;

  .hrader-top {
    position: relative;
    height: 90px;
    text-align: center;

    .image {
      margin-top: 10px;
    }

    .branch-name {
      position: absolute;
      width: 130px;
      top: 25px;
      font-size: 14px;
    }
  }

  .header-main {
    @include verticalCenter(space-around);

    .header-tab {
      width: 120px;
      font-size: 12px;
      text-align: center;
      cursor: pointer;

      .title {
        color: #7d7e80;
        margin: 0 0 10px 0;
      }
    }

    .router-link-active {
      border-bottom: 2px solid #0099ff;

      .title {
        color: #0099ff;
      }
    }
  }
}
</style>
